<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selectedKeys="selectedKeys"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          <router-link to="/feedback">留言板</router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/courses">课程</router-link>
        </a-menu-item>
        <a-menu-item key="3">
          教学保障
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px; text-align: left;">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>留言板</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px', height: '100%' }">
        <router-view></router-view>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>
<script lang="ts">
import { ref, reactive, onMounted, defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const selectedKeys = ref(['1'])

    return {
      selectedKeys
    }
  }
})
</script>
<style>
#components-layout-demo-top .logo {
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  float: left;
  background-image: url(http://www.qfedu.com/images/new_logo.png);
  background-size: 100%, 100%;
}
.layout {
  height: 100%;
}
</style>
